<template>
    <div class="script-tip-dialog" v-show="visible">
      <div class="script-tip-dialog__mark"></div>
      <div :class="['script-tip-dialog__content']">
        <div @click="closeClick" class="script-tip-dialog__close"></div>
        <div :class="['script-tip-dialog__head border']">
          <div class="script-tip-dialog__title">How to create a Script</div>
        </div>
        <div class="script-tip-dialog__main">
          <img class="script-tip-dialog__img" :src="list[active].img" />
          <div class="script-tip-dialog__text">{{ list[active].text }}</div>
          <div class="script-tip-dialog__dots">
            <div :class="['script-tip-dialog__dot', {active: active === i}]" v-for="(item, i) in list" :key="i"></div>
          </div>
          <el-checkbox v-model="radio" label="1" @change="(v) => (radio = v)">Don’t show me again</el-checkbox>
          <div class="script-tip-dialog__btn" @click="clickBtn">{{ active === list.length - 1 ? 'Start' : 'Next' }}</div>
          <div class="script-tip-dialog__btn" @click="clickOtherBtn">{{ 'Other Pop-up' }}</div>
          <div>
          <pre>
            <code>
              data from other pop-up when operated: {{popupData}}
            </code>
          </pre>
        <no-ssr>
            <otherPopup :visible="otherPopupShow"
                        @otherCloseCallBack="callbackFuc" />
        </no-ssr>
      </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import otherPopup from "./OtherPopup.vue"
  export default {
    components: { otherPopup },
    name: 'script-tip-dialog',
    props: {
      visible: Boolean,
    },
    data() {
      return {
        popupData:'',
        radio: false,
        active: 0,
        otherPopupShow: false,
        list: [
          {
            img: require('../../static/script_tip_dialog1.png'),
            text: 'Complete your Story Bible. You will need to include every character that appears in your script - from the main protagonist to the minor side characters.',
          },
          {
            img: require('../../static/script_tip_dialog2.png'),
            text: 'Complete Your Asset Bible. This is where you can pick an asset design for each of your scene locations and your characters. Only the characters listed in your Story Bible will appear in the Asset Bible.',
          },
          {
            img: require('../../static/script_tip_dialog3.png'),
            text: `Write! Either upload your script text, or build your script using MineStudio's software. Don't forget to have fun bringing your creativity to life!`,
          },
        ],
      };
    },
    watch: {
      radio: {
        handler(state) {
          // state && this.setStore(state);
        },
        immediate: true,
      },
    },
    methods: {
      closeClick() {
        this.$emit('closeCallBack');
        // this.setStore();popupData
      },
      clickBtn() {
        if (this.active < this.list.length - 1) {
          this.active += 1;
        } else {
          this.setStore(this.radio);
          this.$router.push({path: '/router'});
        }
      },
      setStore(state = true) {
        window.localStorage.setItem('isOpenedScriptTip', state ? 1 : 0);
      },
      clickOtherBtn(){
          this.otherPopupShow = true;
      },
      // callbackFuc({cityname}){
      //   this.otherPopupShow=false;
      //   this.popupData = cityname;
      //   console.log(cityname);
      // }
      callbackFuc(passedDataFromOtherPopup){
        this.otherPopupShow=false;
        this.popupData = passedDataFromOtherPopup;
        console.log(passedDataFromOtherPopup);
      }
    },
  };
  </script>
  
  <style lang="less">
  .script-tip-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    &__mark {
      width: 100%;
      height: 100%;
    }
    &__content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 448px;
      background: #ffffff;
      border: 1px solid #eceaf3;
      box-sizing: border-box;
      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25), 0px 8px 16px rgba(0, 0, 0, 0.12);
      border-radius: 24px;
      font-family: Nunito;
      padding: 0 24px;
      max-height: 90vh;
      overflow: auto;
      &.max {
        width: 744px;
      }
    }
    &__head {
      width: 100%;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      &.border {
        border-bottom: 1px solid #eceaf3;
      }
    }
    &__title {
      font-size: 20px;
      line-height: 28px;
      text-align: center;
      color: #394454;
    }
  
    &__close {
      position: absolute;
      top: 14px;
      right: 24px;
      width: 36px;
      height: 36px;
      background: center/cover url(../../static/producer_dialog_close.png);
      cursor: pointer;
    }
    &__main {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    &__img {
      width: auto;
      height: 142px;
      margin: 12px 0;
    }
    &__text {
      font-size: 20px;
      line-height: 28px;
      /* or 140% */
  
      color: #333333;
    }
    &__dots {
      display: flex;
      align-items: center;
      padding: 24px 0 12px;
    }
    &__dot {
      width: 8px;
      height: 8px;
      background: #c4c4c4;
      margin-left: 8px;
      border-radius: 50%;
      &:first-of-type {
        margin-left: 0;
      }
      &.active {
        background: #ff6125;
      }
    }
    &__btn {
      margin-top: 12px;
      margin-bottom: 40px;
      width: 170px;
      height: 47px;
      background: #ffffff;
      border: 0.5px solid #ff6125;
      box-sizing: border-box;
      border-radius: 24px;
      font-size: 18px;
      line-height: 47px;
      text-align: center;
      color: #ff6125;
      cursor: pointer;
    }
    .el-radio__input.is-checked .el-radio__inner {
      border-color: #ff6225;
      background: #ff6225;
    }
    .el-radio__input.is-checked + .el-radio__label {
      color: #ff6225;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background: transparent;
      border-color: #ff6225;
      border-width: 4px;
      border-radius: 50%;
    }
    .el-checkbox__inner {
      border-radius: 50%;
      &:hover {
        border-color: #ff6225;
      }
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #ff6225;
    }
  }
  </style>
  